<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点我试试</button>
    <input type="text" class="kangbazi" id="test" hello="world" daminghu="夏雨荷">
    <img src="./panda.png" alt="">
    <input type="radio" checked>
    <input type="radio">

    <select name="" id="">
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">4</option>

    </select>

    <div id="box" data-id="2302" data-user-name="caike">
        这里边是所谓的内容
    </div>

    <!-- // 原生属性的读  写 -->
    <script>
        // 获取元素
        // var inp = document.querySelector('input');
        // console.log(inp.id); // test
        // console.log(inp.className); // class是个关键字 其它被占用了
        // // 使用className代替
        // console.log(inp.type); //text

        // 修改原生属性   

        // var imgele = document.querySelector('img');
        // imgele.src = './meinv.png';
        
        // var btnele = document.querySelector('button');
        // btnele.disabled = true



        // 自定义属性 

        // var inp = document.querySelector('input');
        // console.log(inp.hello); // undefined
        // console.log(inp.daminghu); //undefined 
        // // 元素.属性  适用于原生属性  不适用于自定义属性 

        // inp.setAttribute('age',18);

        // var res = inp.getAttribute('daminghu');
        // console.log(res,typeof res);
        // var res1 = inp.getAttribute('age');
        // console.log(res1,typeof res1);
        // inp.removeAttribute('hello');
        // inp.setAttribute('age',20)


        // 可以操作原生属性  

        // inp.setAttribute('id','no1');
        // inp.removeAttribute('class');
        // console.log(inp.getAttribute('type'))
        // inp.setAttribute('name','haha');

        var divele = document.getElementById('box');
        // console.log(divele.dataset);
        // // 每个标签 天生自带一个属性 dataset 
        // // 长的像对象  
        // // 里边是仅是所有data-属性 和 值 的集合
        // //自动把 中横杠的属性名转成 小驼峰的写法 
        // // divele.dataset.age = 19;  // 新增一个data-开头的属性
        // // 相当于 在div中  增加了  data-age=19
        // // delete divele.dataset.userName
        // // delete divele.dataset.id
        // divele.dataset.id="太酷辣"
        // console.log(divele.dataset.id)

        // 可以使用操作自定义属性的方法 操作h5自定义属性 但是不建议 
        // var res = divele.getAttribute('data-id');
        // console.log(res)
        // var res2 = divele.getAttribute('data-user-name');
        // console.log(res2)

        // divele.removeAttribute('data-user-name')

        // divele.setAttribute('data-age',20);
    </script>
</body>
</html>